<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>他人的某个相册</title>
<link rel="icon" href="../img/BaiYi_title_icon.png" />
<link type="text/css" rel="stylesheet" href="../css/foundation.css" />
<link type="text/css" rel="stylesheet" href="../css/baiyi.css" />
<script type="text/javascript" src="../js/vendor/jquery.js"></script>
<script type="text/javascript" src="../js/foundation/foundation.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.topbar.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.reveal.js"></script>
<script type="text/livescript"
	src="../js/foundation/foundation.equalizer.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.dropdown.js"></script>
<script type="text/javascript" src="../js/vendor/modernizr.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.clearing.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$(document).foundation('topbar', 'reflow');
		$(document).foundation('offcanvas', 'reflow');
		$(document).foundation('revaeal', 'reflow');
		$(document).foundation('equalizer', 'reflow');
		$(document).foundation('dropdown', 'reflow');
		$(document).foundation('clearing', 'reflow');
	});
</script>
</head>
<body>
	<div class="off-canvas-wrap" data-offcanvas>
		<div class="inner-wrap">
			<jsp:include page="nav.jsp"></jsp:include>
			<!-- Off Canvas Menu 显示简易个人信息 -->
			<jsp:include page="user.jsp"></jsp:include>
			<!---------------------弹窗全写在这里了---------------------->
			<!--该相册访客弹窗内容-->
			<div id="visitors" class="reveal-modal" data-reveal>
				<h4>最近访客</h4>
				<hr>
				<div class="large-12 medium-12 small-12 columns panel">
					<div class="recent_visitor">
						<ul class="inline-list">
							<c:if test="${!empty albumVisitor }">
								<c:forEach items="${albumVisitor }" var="albumVisitor">
									<li><img src="${ albumVisitor.tbUser.userPortrait}" /> <span><fmt:formatDate
												value="${albumVisitor.albumVisitorTime }" /> </span></li>
								</c:forEach>
							</c:if>
						</ul>
					</div>
				</div>
			</div>
			<!--上传照片弹窗内容-->
			<div id="upload_pictures" class="reveal-modal" data-reveal>
				<h2>上传照片>普通上传</h2>
				<hr />
				<div class="row">
					<form action="upload" method="post"
						enctype="multipart/form-data">
						<div class="large-12"
							style="text-align: center; margin-top:6.25rem; margin-bottom: 6.25rem;">
							<input type="hidden" name="id" value="${album.albumId}">
							<input type="file" name="image" id="image" value="选择照片..."
								required="required" multiple="multiple" accept="image/*" />
							<h4>按住Ctrl可多选照片</h4>
							<input type="submit" value="确定上传">
						</div>
					</form>
				</div>
			</div>
			<!--批量管理弹窗内容-->
			<div id="batch_management" class="reveal-modal" data-reveal
				style=" margin-top:150px;">
				<h4>批量管理</h4>
				<hr />
				<!--表单内容-->
				<form method="post">
					<div class="row">
						<div class="large-12  columns">
							<input id="plsc" type="checkbox"><label for="plsc"><span>全选</span></a></label>
							<input type="reset" value="取消" class="button small  right" /> <input
								type="submit" value="删除" class="button small right alert" /> <input
								type="submit" value="设置封面" class="button small right secondary" />
							<!--设置封面需求：如果选中多个提示仅能选择一个，选中一个的时候可设置成功-->
						</div>
						<hr />
						<div class="large-12 medium-12 small-12 columns photo_style">
							<ul class="large-block-grid-6 medium-block-grid-4">
								<c:if test="${!empty album }">
									<c:forEach items="${album.tbPhotos }" var="photos">
										<li><input id="checkbox1" type="checkbox" name="photoId"
											value="${photos.photoId }"><label for="checkbox1"><img
												data-caption="美女" src="${photos.photo }" alt="无"><span>
													<%-- ${photos.photoName } --%>
											</span></label></li>
									</c:forEach>
								</c:if>
							</ul>
						</div>
					</div>
				</form>
			</div>
			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域可替换------------------------------------------------>
			<!----------------------------------------------------------------------------------------->
			<div
				style="background-repeat: no-repeat; background-position: center top; background-attachment: scroll; background-image: url('../img/picture/bg_top01.jpg');">
				<div class="row">
					<div class="large-9  medium-8 columns">
						<h2 style="color:#5D7895">${album.tbUser.userName }的空间</h2>
						<span style="color:#5D7895;">${album.tbUser.qzoneAutograph }<a
							href="#">&nbsp;&nbsp;(http://user.qzone.baiyi.com/home)</a></span>
					</div>
				</div>
				<div class="row" style="margin-top: 20px;">
					<!--头像-->
					<div class="large-3 medium-4 columns">
						<div class="panel"
							style="width:200px; height:200px; padding:0.5rem;">
							<img style="height:182px;" src="${album.tbUser.userPortrait }" />
						</div>
					</div>
					<!--标题栏-->
					<div class="large-9 medium-8 columns">
						<div class="large-9 medium-8 columns" style="padding-top:53px;">
							<span style="color:#5D7895; font-size:1.25rem;">${album.tbUser.userName }</span><span
								class="lv"></span>
						</div>
						<div class="large-3 medium-4 columns">
							<c:choose>
								<c:when test="${ currentUserAlbum eq 0}">
									<form action="" method="get">
										<button class="small">赞 &#40; ${album.albumHot }
											&#41;</button>
									</form>
									<form action="" method="get">
										<button class="small">&radic;关注本相册</button>
									</form>
								</c:when>
								<c:otherwise>
									<button class="small" disabled="disabled">赞 &#40;
										${album.albumHot } &#41;</button>
								</c:otherwise>
							</c:choose>
							<div>
								<img src="../img/icon_png/weather-sunny.png" /><span
									style="margin-left:10px; color:#95D3E5;">海口&nbsp;
									&nbsp;|&nbsp; &nbsp; 晴</span>
							</div>
						</div>
						<div class="large-12  medium-12 columns" style="">
							<ul class="inline-list" style="padding-top:26px;">
								<li><a href="toOtherHome?id=${album.tbUser.userId }">相册</a></li>
								<li><a
									href="toOtherMessageBoard?id=${album.tbUser.userId }">留言板</a></li>
								<li><a href="others_information_center.jsp">更多资料>></a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--相册区域--------------------------------------------------->
				<div class="row" style="background-color:#F2F2F2" data-equalizer>
					<div class="large-12 medium-12 small-12  columns"
						style="margin-top: 20px;">
						<a href="otherHome?id=${album.tbUser.userId}">&laquo;返回</a>
						<hr />
						<!--相册封面-->
						<div class="large-2 medium-3 columns">
							<div class="panel"
								style="width:100px; height:100px; padding:0.5rem;">
								<img style="height:82px;" src="${album.showPhotoPath }"
									alt="暂无封面" />
							</div>
						</div>
						<!--标题栏-->
						<div class="large-10 medium-9 columns">
							<div class="row">
								<span style="color:#333; font-size:1.25rem;">${album.albumName }</span>
								<c:choose>
									<c:when test="${ photoSize != 0}">
										<span>(${ photoSize}/张)</span>
									</c:when>
									<c:otherwise>(0/张)</c:otherwise>
								</c:choose>

								<span class="visitor—_comment_praise right"> <a
									data-reveal-id="visitors">访客&nbsp; &nbsp;|</a><a
									href="#comment_href">&nbsp; &nbsp;评论&nbsp; &nbsp;|</a><a>&nbsp;
										&nbsp;赞</a>
								</span>
							</div>
						</div>
						<c:if test="${ currentUserAlbum eq 1}">
							<!--上传照片和批量管理-->
							<div class="row cloumns">
								<a class="button  small " data-reveal-id="upload_pictures">
									&uArr; 上传照片</a> <a class="button  small secondary"
									data-reveal-id="batch_management"> &oplus; 批量管理</a>
							</div>
						</c:if>
					</div>
					<hr />
					<hr />
				</div>
				<!--全部照片-->
				<div class="row columns">
					<div class="large-12 medium-12 small-12 columns photo_panel_style">
						<ul
							class="clearing-thumbs large-block-grid-8 medium-block-grid-5 small-block-grid-2"
							data-clearing>
							<c:if test="${!empty album }">
								<c:forEach items="${album.tbPhotos }" var="photos">
									<li><a href="${photos.photo }"><img
											src="${photos.photo }" alt="无"><span>
												<%-- ${photos.photoName } --%>
										</span></a></li>
								</c:forEach>
							</c:if>
						</ul>
					</div>
				</div>
				<!--评论区域-->
				<div class="large-12 medium-12 small-12  columns">
					<hr>
					<h2>评论</h2>
					<div class="large-12 columns">
					<c:choose>
						<c:when test="${album.tbUser.userId eq currentUser.userId }"></c:when>
						<c:otherwise><form action="addComment" method="post">
						<input type="hidden" name="id" value="${album.albumId }">
							<textarea placeholder="我也来吐槽这个相册..." name="comment.comment" required="required"></textarea>
							<input class="small button" type="submit" value="提交评论" />
						</form></c:otherwise>
					</c:choose>
						<table class="comment columns" id="comment_href">
							<c:if test="${!empty album }">
								<c:forEach items="${album.tbComments }" var="comment">
									<tr>
										<td class="comment_content">${comment.comment }</td>
										<td class="comment_time">${comment.commentTime }</td>
										<td class="comment_user"><a
											href="userDetail?id=${comment.tbUser.userId }">${comment.tbUser.userName }</a></td>
									</tr>
								</c:forEach>
							</c:if>
							<!-- <tr>
									<td class="comment_content">大傻逼。。。</td>
									<td class="comment_time">2015-1-28</td>
									<td class="comment_user"><a href="">评论者名字</a></td>
								</tr>
								<tr>
									<td class="comment_content">大笨蛋。。。</td>
									<td class="comment_time">2015-1-28</td>
									<td class="comment_user"><a href="">评论者名字</a></td>
								</tr>
								<tr>
									<td class="comment_content">二货。。。</td>
									<td class="comment_time">2015-1-28</td>
									<td class="comment_user"><a href="">评论者名字</a></td>
								</tr> -->
						</table>
					</div>
				</div>
			</div>

			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域------end-------------------------------------------->
			<!----------------------------------------------------------------------------------------->
			<!------------------页脚--------------------->
			<jsp:include page="footer.jsp"></jsp:include>
			<!-- close the off-canvas menu -->
			<a class="exit-off-canvas"></a>
		</div>
	</div>
	</div>
</body>
</html>